<!-- 轮播图 -->
<template>
  <swiper autoplay circular indicator-dots indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#fff" interval="3000" class="swipe-box">
    <swiper-item v-for="(item, index) in list" :key="index" class="tui-swiper">
      <view class="tui-swiper-item">
        <image :src="item" mode="aspectFill" />
      </view>
    </swiper-item>
  </swiper>
</template>

<script>
export default {
  name: 'Swiper',
  props: {
    /* 编辑器的内容 */
    list: {
      type: Array,
      default: [],
    },
  },
  data () {
    return {
      // list: [{
      //   name: '',
      //   url: require('@/static/image/banner_01.png'),
      // }, {
      //   name: '',
      //   url: require('@/static/image/banner_03.png'),
      // }, {
      //   name: '',
      //   url: require('@/static/image/banner_02.png'),
      // }, {
      //   name: '',
      //   url: require('@/static/image/banner_04.png'),
      // }],
    };
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.swipe-box {
  width: 100%;
  height: 200px;
  .tui-swiper {
    width: 100%;
    height: 100%;
  }
  .tui-swiper-item {
    height: 200px;
    image {
      width: 100%;
      height: 200px;
    }
  }
  // 修改指示器样式
  ::v-deep .uni-swiper-dots {
    .uni-swiper-dot-active {
      width: 20px;
      border-radius: 10px;
      opacity: 1;
    }
  }
}
</style>
